<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #f0f0f0;
        overflow: hidden;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="./asserts/konva.min.js"></script>
    <script>
      const stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
      })
      const layer = new Konva.Layer()
      stage.add(layer)

      // 中心点坐标
      const centerX = stage.width() / 2
      const centerY = stage.height() / 2

      const data = [
        {
          name: 'xiangmu1',
          value: 0.25,
          color: 'orange',
        },
        {
          name: 'xiangmu2',
          value: 0.2,
          color: 'blue',
        },
        {
          name: 'xiangmu3',
          value: 0.3,
          color: 'green',
        },
        {
          name: 'xiangmu4',
          value: 0.05,
          color: 'purple',
        },
        {
          name: 'xiangmu5',
          value: 0.1,
          color: 'red',
        },
        {
          name: 'xiangmu6',
          value: 0.1,
          color: '#e0e',
        },
      ]

      // 初始角度
      let tempAngel = -90

      data.forEach((item, index) => {
        const angle = 360 * item.value
        // 扇形
        const wedge = new Konva.Wedge({
          x: centerX,
          y: centerY,
          // 0 度开始旋转（x 轴正方向）填充顺时针
          // 负数代表 0 到 -90 度，然后填充顺时针
          angle: angle,
          radius: 100,
          fill: item.color,
          // 如果想逆时针填充，用旋转
          rotation: tempAngel,
          name: 'wedge',
        })
        // 文字
        const textAngle = tempAngel + (1 / 2) * angle
        const text = new Konva.Text({
          x: centerX + (100 + 20) * Math.cos((Math.PI / 180) * textAngle),
          y: centerY + (100 + 20) * Math.sin((Math.PI / 180) * textAngle),
          text: item.value * 100 + '%',
          fill: item.color,
        })

        if (textAngle > 90 && textAngle < 270) {
          // 让文本向左边，移动文字宽度的位置
          text.x(text.x() - text.getWidth())
        }

        layer.add(wedge)
        layer.add(text)
        // 更新旋转角度 加上 当前扇形的角度
        tempAngel += wedge.angle()
      })

      layer.draw()

      // 绘制动画 （使用递归）
      const wedges = layer.find('.wedge')
      let index = 0
      wedges.forEach((item) => {
        item.angle(0)
      })

      // 执行动画方法
      function animatePie() {
        if (index >= wedges.length) {
          return
        }
        const item = wedges[index]
        const angle = item.angle()

        item.angle(0)

        item.to({
          // 按照度数平均 1s
          duration: ((data[index].value * 360) / 360) * 1,
          angle: data[index].value * 360,
          // 动画结束后执行
          onFinish: () => {
            index++
            animatePie()
          },
        })
      }

      animatePie()
    </script>
  </body>
</html>
